<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>ACE Editor Demo</title>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/ace/1.2.4/ace.js"></script>
	<script src="http://cdn.bootcss.com/ace/1.2.4/ext-language_tools.js"></script>
	<script src="http://cdn.bootcss.com/ace/1.2.4/ext-old_ie.js"></script>
	<script src="http://cdn.bootcss.com/ace/1.2.4/theme-monokai.js"></script>
</head>
<body>
	<form id="listFm" name="listFm" method="post" action="${context}/ace/list.do">
		<table>
			<tr>
				<td>标题：</td>
				<td><#if ace?? && ace.title??>${ace.title?html}</#if></td>
			</tr>
			<tr>
				<td colspan="2">内容：</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<div id="editor"><#if ace?? && ace.content??>${ace.content?html}</#if></div>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button type="button" onclick="javascript:listAce();">返回</button>
				</td>
			</tr>
		</table>
	</form>
    
	<script type="text/javascript">
		//引入兼容IE的模块
		require("ace/ext/old_ie");
		
		//引入代码补全和提示模块
		ace.require("ace/ext/language_tools");
		
		//以id为compile-editor的html元素创建编辑器
		var editor = ace.edit("editor");
		editor.$blockScrolling = Infinity;
		
		//字体大小
		editor.setFontSize(16);
		
		//设置只读（true时只读，用于展示代码）
		editor.setReadOnly(false); 
		
		//设置主题为monokai
		editor.setTheme("ace/theme/monokai");
				
		//设置语言
		//editor.session.setMode("ace/mode/javascript");
		editor.getSession().setMode("ace/mode/javascript");
		
		//移动光标至第0行，第0列
		editor.moveCursorTo(0, 0);
		
		editor.setOptions({
		    enableBasicAutocompletion: true,
		    enableSnippets: true,
		    enableLiveAutocompletion: true
		});
		
		//设置宽、高
		$('#editor').height(600);
		$('#editor').width(700);
			
		function listAce(){
			$("#listFm").submit();
		}		
	</script>
</body>
</html>